<template>
   <CategorySeletor :isDisable="!isshowAttrList"/>
   <el-card>
    <div v-if="isshowAttrList">
      <el-button type="primary" :icon="Plus" @click="toSaveAttrValue" :disabled="!categoryStore.category3Id" >添加属性</el-button>
      <el-table :data="attrList" border style="width: 100%">
        <el-table-column align="center" prop="index" type=index label="序号" width="80"/>
        <el-table-column prop="attrName" label="属性名称" width="180" />
        <el-table-column prop="address" label="属性值列表" >
        <template v-slot="{row}">
          <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.attrId" class="ml-2" type="success" style="margin-right:10px">{{attrValue.valueName}}
          </el-tag>
        </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template v-slot="{row}">
            <el-button title="编辑属性" type="warning" :icon="Edit"  size="small" @click="updataAttrValue(row)"/>
            <el-popconfirm title="真的要删除此条数据吗" @confirm="confirmEvent(row)" @cancel="cancelEvent">
              <template #reference>
                  <el-button title="删除属性" type="danger" :icon="Delete" size="small"/>
              </template>
            </el-popconfirm>
          </template> 
        </el-table-column>
      </el-table>
     </div>
     <div v-else>
      <el-form>
        <el-form-item label='属性名'>
            <el-input  placeholder="请输入属性名" style="width:30%" v-model="attrInfo.attrName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Plus" :disabled="!attrInfo.attrName" @click="toAddInfoData">增加属性值</el-button>
          <el-button type="default" @click="isshowAttrList = true">取消</el-button> 
        </el-form-item>
       </el-form>
       <el-table :data="attrInfo.attrValueList" stripe style="width: 100%;margin-bottom:20px">
          <el-table-column  label="序号" width="80" type="index" align="center"/>
          <el-table-column  label="属性值名称">
            <template v-slot="{row,$index}">
              <el-input ref="inputRef" v-model="row.valueName" v-if="row.isShowInput" @blur="blurInput(row,$index)"></el-input>
              <span v-else @dblclick="changeInput(row,$index)" style="display:block;width:100%">{{row.valueName}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="操作" width="500">
            <template v-slot="{$index}">
              <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                title="Are you sure to delete this?"
                @confirm="confirm($index)"
                @cancel="cancel"
              >
              <template #reference>
                <el-button :plain="true" title="删除属性" type="danger" :icon="Delete" size="small"></el-button>
              </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="addAttrValue">保存</el-button>
        <el-button type="default" @click="isshowAttrList=true">取消</el-button>
     </div>
  </el-card>
</template>

<script lang="ts">
// import CategorySelector from '@/components/CategorySeletor/index.vue'
export default {
  name: "Attr",
  // components:{
  //     CategorySelector
  // }
};
</script>

<script lang="ts" setup>
import {Plus,Edit,Delete} from '@element-plus/icons-vue';
import {useCategoryListStore} from '@/stores/categoryList';
import {reqGetAttrListDataByCategory3Id,reqDeleteOneAttr,reqAddAttrValue} from '@/api/product/attr'
import { onMounted, reactive, ref,watch,nextTick} from 'vue';
import { ElMessage} from 'element-plus';
import type {InputInstance} from 'element-plus'
import type {AttrInfoModelList,AttrValueModel} from '@/api/product/model/attrModel'
import cloneDeep from "lodash/cloneDeep"
const isshowAttrList = ref<boolean>(true);
// 定义一个数组来存储数据
const attrList = ref<AttrInfoModelList[]>([])
//获取store
const categoryStore = useCategoryListStore();
// 定义一个对象，用于收集要添加的属性信息
const attrInfo = reactive<AttrInfoModelList>({
  attrName:"",  //属性名称
  attrValueList:[],//属性值列表
  categoryId:0,    //id值
  categoryLevel:3  //等级
})
// 定义一个变量，对应输入框，以便获取输入框对象
const inputRef = ref<InputInstance>()
// 1.根据一二三级导航获取展示数据
const getAttrListData = async ()=>{
  const result = await reqGetAttrListDataByCategory3Id({
    category1Id:categoryStore.category1Id,
    category2Id:categoryStore.category2Id,
    category3Id:categoryStore.category3Id
    })
    // console.log('attr',result);
    attrList.value = result
}
//2.监视三级导航数据,只要一发生变化就重新请求
watch(()=>categoryStore.category3Id,()=>{
  // console.log('cca',category3Id);
  if(!categoryStore.category3Id){
    attrList.value = [];
    return
  }
  getAttrListData()
}, {
    immediate:true
  }
)

// 3.删除属性
const confirmEvent =async (row:AttrInfoModelList)=>{
  const result = await reqDeleteOneAttr(row.id as number)
  ElMessage.success('删除成功了')
  console.log('ww',result);
  getAttrListData()
}
// 4.取消删除属性
const cancelEvent = ()=>{
  ElMessage('取消删除了')
}

// 5.添加属性
const toAddInfoData = ()=>{
  attrInfo.attrValueList.push({
    // attrId:0,  //编辑的时候用
    valueName:'',  //属性值,input输入框里面的值
    // id:0,  
    isShowInput:true,  //是显示输入框，还是span标签
  })
  //等页面的内容加载完成后在执行
  nextTick(()=>{
    inputRef.value?.focus()
  })

}

// 6.失去焦点，span标签需要显示，当内容为空删除掉input框
const blurInput = (row:AttrValueModel,index:number)=>{
  // 判断输入是否有值
  if(!row.valueName){
    attrInfo.attrValueList.splice(index,1)
    return
  }
  //span标签显示
  row.isShowInput = false
}

// 7.span标签中双击即可编辑
const changeInput = (row:AttrValueModel,index:number)=>{
  //显示输入框
  row.isShowInput = true
  //输入框自动获取焦点
  nextTick(()=>{
    inputRef.value?.focus()
  })
}

// 8.删除属性
const confirm = (index:number) => {
  attrInfo.attrValueList.splice(index,1)
}
// 9.取消删除属性
const cancel = () => {
  ElMessage('取消删除属性了')
}

// 10.点击添加属性
const toSaveAttrValue = ()=>{
  //显示添加属性页面
  isshowAttrList.value = false;
  //清空框里的内容
  attrInfo.attrName = ''
  attrInfo.attrValueList=[]
  delete attrInfo.id 
}
// 11.增加属性
const addAttrValue = async()=>{
  attrInfo.categoryId = categoryStore.category3Id
  await reqAddAttrValue(attrInfo)
  //跳转到属性列表页面
  isshowAttrList.value = true
  ElMessage.success('属性添加成功')
  //重新发送请求
  getAttrListData()
}

// 12.点击编辑，修改属性
const updataAttrValue = (row:AttrValueModel)=>{
  isshowAttrList.value = false;
  //回显数据
   Object.assign(attrInfo,cloneDeep(row))
}
</script>

<style  scoped>
</style>